<template>
	<view class="appBox">
		<view class="j-bg">
			<text class="txt">可用通证</text>
			<text class="num">{{ userInfoScore }}</text>
		</view>
		<!-- 收益记录 -->
		<view class="footer">
			<view class="menus">
				<view @click="menuClick(item.key)" :class="{'menu-item-active':active==item.key}" class="menu-item"
					v-for="item in menu" :key="item.key">
					{{item.title}}
				</view>
			</view>
			<view class="list-input">
				<form>
					<view class="item">
						<view class="acea-row row-middle">
							<input type="number" class="texts" placeholder="输入转出数量" v-model="lbTransferRecord.num"
								required />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<input type="text" class="texts" maxlength="11" placeholder="输入接收用户"
								v-model="lbTransferRecord.receiveAccount" required />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<input type="password" class="texts" maxlength="6" placeholder="输入交易密码" v-model="lbTransferRecord.payPass"
								required />
						</view>
					</view>
				</form>
			</view>
			<view class="remark" v-if="false">
				<text>温馨提示：</text>
				<text>{{active==1?'转出需要收取10%手续费及个税费':'转到交易宝，可以进行金币的出售'}}</text>
			</view>
		</view>
		<button class="btn" @click="rollOut">立即转出</button>
	</view>
</template>

<script>
	import {
		getUserInfo,
		lbtransferrecords
	} from "@/api/user";
	const menu = [
		// {
		// 	key: 1,
		// 	title: '互转'
		// },
		// {
		// 	key: 2,
		// 	title: '交易宝'
		// },
	]
	export default {
		data() {
			return {
				userInfoScore: "",
				menu,
				active: 1,
				lbTransferRecord: {
					num: "",
					receiveAccount: "",
					payPass: "",
				}
			}
		},
		onLoad() {
			this.getUserInfos();
		},
		methods: {
			menuClick(key) {
				this.active = key
			},
			async getUserInfos() {
				uni.showLoading({
					title: '正在加载'
				})
				getUserInfo().then((res) => {
					this.userInfoScore = res.data.score
					uni.hideLoading()
				}).catch((res) => {
					this.$util.Tips({
						title: res
					});
					uni.hideLoading()
				})
			},
			rollOut() {
				if (!this.lbTransferRecord.num) return this.$util.Tips({
					title: "请输入转出数量"
				})
				if (!this.lbTransferRecord.receiveAccount) return this.$util.Tips({
					title: "请输入接收用户"
				})
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.lbTransferRecord.receiveAccount)) return this.$util.Tips({
					title: '请输入正确的接收用户'
				})
				if (!this.lbTransferRecord.payPass) return this.$util.Tips({
					title: "请输入交易密码"
				})
				lbtransferrecords(this.lbTransferRecord).then((res) => {
					uni.showToast({
						title:res.message,
						icon:"success"
					})
					this.lbTransferRecord.num = ''
					this.lbTransferRecord.payPass=''
					this.lbTransferRecord.receiveAccount=''
					this.getUserInfos()()
					
				}).catch((res) => {
					this.$util.Tips({
						title: res
					});
					uni.hideLoading()
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	@import url("../../../static/css/gstyle.scss");

	.appBox {
		background-color: #F2F6FD;
		height: 100%;
		padding: 16rpx 33rpx;

		.j-bg {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: white;
			height: 285rpx;
			width: 100%;
			background: url('/static/images/gold_bg.png') no-repeat;
			background-size: 100% 100%;
			padding: 39rpx 43rpx 31rpx 43rpx;
			font-family: PingFang SC;
			font-weight: 400;

			.txt {
				font-size: 28rpx;
			}

			.num {
				font-size: 66rpx;
			}
		}

		.footer {
			.menus {
				display: flex;
				margin-top: 57rpx;

				.menu-item {
					font-size: 30rpx;
					text-align: center;
					height: 89rpx;
					line-height: 89rpx;
					width: 342rpx;
					background: white;
				}

				.menu-item-active {
					background: $theme-color;
					color: white;
				}

			}

			.list-input {

				.item {
					border-bottom: 1px solid #F0F0F0;
					background: #fff;

					.row-middle {
						position: relative;
						padding: 0 25rpx;
						margin-top: 20rpx;



						.texts {
							flex: 1;
							font-size: 28rpx;
							height: 89rpx;
							line-height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						input {
							flex: 1;
							font-size: 28rpx;
							height: 80rpx;
							line-height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}


					}
				}

			}

		}

		.remark {
			display: flex;
			flex-direction: column;
			align-items: self-start;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #93B3E2;
			margin-top: 60rpx;
		}
	}


	page {
		background-color: #fff !important;
	}
</style>
